<!-- Dom模板 -->
<template>
  <div class="bigs">
    <!-- 顶部 -->
    <div class="top">
      <div class="top_left">
        <input type="text" name="" placeholder="2020夏令营" id="" />
      </div>
      <div class="top_right">
        <span class="iconfont icon-weixinxiaochengxu"></span>
      </div>
    </div>
    <!-- 美可玩 -->
    <div class="wan">
      <p>
        <img
          class="animate__animated animate__bounceInLeft"
          src="../../../../static/img/图片 3@1x.png"
          alt=""
        />
      </p>
      <p>
        <img class="iii" src="../../../../static/img/图片 2@1x.png" alt="" />
      </p>
    </div>

    <!-- 图片区 -->
    <div class="imgs">
      <img
        class="animate__animated animate__bounceInRight"
        src="../../../../static/img/图片 2@1x (2).png"
        alt=""
      />
    </div>

    <!-- 图片拖拽区 -->
    <div class="touchqu">
      <div
        class="bigtouchqu animate__animated animate__bounceInRight"
        ref="bigtouchqu"
      >
        <div class="chang" ref="chang">
          <div :style="div1">
            <p>奶爸来袭</p>
            <p>档位线来临时最大的危险就是奶爸！</p>
            <p><span></span><span>53432次</span></p>
            <div><span>21集</span></div>
          </div>
          <div :style="div2">
            <p>宝贝最爱</p>
            <p>增强自信心，决战前夕的动员大会</p>
            <p><span></span><span>13991次</span></p>
            <div><span>38集</span></div>
          </div>
          <div :style="div3">
            <p>宝妈必听</p>
            <p>十分钟让您懂宝贝心理</p>
            <p><span></span><span>982201次</span></p>
            <div><span>21集</span></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选数据 -->
    <div class="last">
      <ul class="animate__animated animate__bounceInRight">
        <li
          v-for="(item, index) in datalist"
          :key="index"
          @click="light(index)"
          :class="nowIndex === index ? 'bg' : ''"
        >
          {{ item.name }}
        </li>
      </ul>

      <div>
        <div
          class="cont animate__animated animate__bounceInRight"
          v-for="(item, index) in datalist"
          :key="index"
          v-show="nowIndex === index"
        >
          <div class="pages" v-for="(items, indexs) in item.list" :key="indexs">
            <img :src="items.img" alt="" />
            <div class="pp">
              <p>{{ items.cont }}</p>
              <p>
                <span>{{ items.li }}</span
                ><span>{{ items.ru }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <Tan /> -->
    <!-- <Login v-if="flag" @fan="fan"></Login>
    <alery v-if="flagd" @no="no"></alery> -->
    <!-- 底部 -->
    <div class="blindstory">
      <div class="pop_up">
        <div class="h2_huan">
          <p>欢 迎 您 来 到</p>
          <p>Maco 玩 故 事</p>
        </div>
        <div class="h1_huan">
          <p class="h1_huan_xin">新 用 户 大 礼 包</p>
          <p class="h1_huan_san"><span class="ma">3天</span>畅 听 VIP！</p>
        </div>
        <div class="story"  @click="no_back">马上听故事</div>
      </div>
    </div>
    <!-- <div class="no_XX">x</div> -->
    <p class="no_XX" @click="no_back"><i class="iconfont icon-guanbi1"></i></p>
  </div>
</template>
<script>
// import Tan from "./tan/tan.vue";
import BScroll from "better-scroll";
import datalist from "../../../../static/data/wei-login.json";
import picture1 from "@/assets/图片 5 Copy 2@1x (2).png";
import picture2 from "@/assets/图片 5@1x (2).png";
import picture3 from "@/assets/图片 5 Copy@1x (1).png";
import animated from "animate.css";
// import Login from './tan/tan'
// import alery from "../../tree/home/alery"
// import tan from ""
export default {
  name: "",
  
  components: {
    // Login,
    // alery
    // Tan,
  },
  data() {
    return {
      msg: "测试",
      phoneText : '',
      div1: {
        backgroundImage: `url(${picture1})`,
        backgroundRepeat: `no-repeat`,
        backgroundPosition: `152px 59px`,
        backgroundSize: `177px 123px`,
      },
      div2: {
        backgroundImage: `url(${picture2})`,
        backgroundRepeat: `no-repeat`,
        backgroundPosition: `198px 46px`,
        backgroundSize: `123px 138px`,
      },
      div3: {
        backgroundImage: `url(${picture3})`,
        backgroundRepeat: `no-repeat`,
        backgroundPosition: `152px 59px`,
        backgroundSize: `177px 123px`,
      },
      flag: false,
      flagd: false,
      datalist: [],
      nowIndex: 0,
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.datalist = datalist;
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.bigtouchqu, {
        scrollX: true,
        bounce: {
          // top: true,
          // bottom: true,
          left: false,
          right: false,
        },
      });
    });
  },
  // Vue方法定义
  methods: {
    light(index) {
      this.nowIndex = index;
    },
    no_back() {
      // this.$emit("no");
      this.$router.push("/home")
      // console.log(11111);
    },
  },
};
</script>

<style scoped>
/* 顶部 */
@import url("../../../assets/font/iconfont.css");
@import url("../../../assets/font_3bvw1uzlppq/iconfont.css");

.bigs {
  width: 100vw;
  height: 100vh;
  /* overflow-y: auto; */
  overflow: hidden;
  position: absolute;
  top:0;
  left:0;
  z-index: 900;
}

.top {
  left: 0px;
  top: 0px;
  width: 414px;
  height: 88px;
  display: flex;
  align-items: flex-end;
  background-color: rgba(255, 255, 255, 100);
}
.top_left {
  margin-left: 19px;
  left: 19px;
  top: 50px;
  float: left;
  margin-right: 34px;
  margin-bottom: 6px;
  width: 258px;
  height: 32px;
  border-radius: 100px;
  background-color: rgba(242, 242, 242, 100);
  color: rgba(191, 191, 191, 100);
  font-size: 14px;
  text-align: left;
  overflow: hidden;
  margin-bottom: 6px;
  font-family: Arial;
}
.top_left input {
  height: 32px;
  padding-left: 19px;
  background: none;
  border: none;
  outline: none;
}
.top_right {
  left: 311px;
  float: left;
  top: 50px;
  width: 87px;
  height: 32px;
  line-height: 20px;
  margin-bottom: 6px;

  border-radius: 30px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  border: 1px solid rgba(232, 232, 232, 100);
}
.top_right span {
  font-size: 32px;
  display: inline-block;
  margin-top: 6px;
}
.animate__animated.animate__bounceInRight {
  --animate-duration: 1s;
}

.animate__animated.animate__bounceInLeft {
  --animate-duration: 1s;
}

:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}
/* 美可玩 */
.wan {
  width: 414px;
  height: 60px;
  display: flex;
  line-height: 60px;
  background: white;
  background-color: rgba(255, 255, 255, 100);
  height: 60px;
  line-height: 60px;
}
.wan p {
  line-height: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 100);
}
.wan p:nth-child(1) {
  padding-left: 10px;
  margin-right: 229px;
}
.wan p img {
  vertical-align: middle;
  background: rgba(255, 255, 255, 100);
}
.wan p:nth-child(1) img:nth-child(1) {
  width: 114px;
  height: 38px;
}

.wan p:nth-child(2) img:nth-child(2) {
  width: 40px;
  height: 40px;
  line-height: 38px;
  border-radius: 50%;
}

.wan p:nth-child(2) .iii {
  animation: rot 1s linear infinite;
}
@keyframes rot {
  100% {
    transform: rotate(360deg);
  }
}
/* 大图 */
.imgs {
  left: 0px;
  top: 148px;
  width: 414px;
  height: 182px;
  line-height: 20px;
  border-radius: 0px 0px 26px 26px;
  text-align: center;
  background: white;
  box-shadow: 0px 2px 6px 0px rgba(230, 230, 230, 40);
}
.imgs img {
  margin-top: 12px;
  left: 14px;
  top: 160px;
  width: 386px;
  height: 158px;
  border-radius: 26px;
}

/* 图片拖拽区 */
.touchqu {
  margin-top: 10px;
  width: 414px;
  height: 204px;
  line-height: 20px;
  border-radius: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: white;
  box-shadow: 0px 2px 6px 0px rgba(230, 230, 230, 40);
}

.touchqu .bigtouchqu {
  width: 386px;
  height: 182px;
  text-align: center;
  line-height: 182px;
  background: white;
  overflow: hidden;
}
.touchqu .bigtouchqu .chang {
  border-radius: 26px;
  display: flex;
  width: 1074px;
  background: white;
  height: 182px;
}
.touchqu .bigtouchqu .chang > div {
  width: 348px;
  height: 182px;
  line-height: 20px;
  border-radius: 26px;
  background-color: rgba(253, 211, 60, 100);
  text-align: center;
}
.touchqu .bigtouchqu .chang div:nth-child(1) {
  margin-right: 15px;
  background: #fdd33c;
}
.touchqu .bigtouchqu .chang div:nth-child(2) {
  background: #09d0b2 1%;

  margin-right: 15px;
}
.touchqu .bigtouchqu .chang div:nth-child(3) {
  background: #fd8ebe;
}
.touchqu .bigtouchqu .chang > div p:nth-child(1) {
  width: 117px;
  padding-top: 19px;
  padding-left: 24px;
  font-weight: 700;
  height: 28px;
  color: rgba(255, 255, 255, 100);
  background-color: transparent;
  font-size: 23px;

  text-align: left;
  font-family: 方正准圆-标准;
}
.touchqu .bigtouchqu .chang > div p:nth-child(2) {
  width: 292px;
  height: 28px;
  padding-left: 24px;
  margin-top: 38px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 100);
  background-color: transparent;

  font-size: 16px;
  text-align: left;
  font-family: 方正准圆-标准;
}
.touchqu .bigtouchqu .chang > div p:nth-child(3) {
  background-color: transparent;
  width: 292px;
  height: 28px;
  padding-left: 24px;
  margin-top: 44px;

  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 100);

  font-size: 16px;
  text-align: left;
  font-family: 方正准圆-标准;
}
.touchqu .bigtouchqu .chang > div p:nth-child(3) span:nth-child(1) {
  width: 24px;
  height: 24px;
  display: inline-block;
  background: olivedrab;
}
.touchqu .bigtouchqu .chang > div p:nth-child(3) span:nth-child(2) {
  left: 53px;
  top: 144px;
  width: 70px;
  height: 28px;
  color: rgba(255, 255, 255, 100);
  font-size: 14px;
  background-color: transparent;

  text-align: left;
  font-family: 方正准圆-标准;
}
.touchqu .bigtouchqu .chang > div div {
  background-color: transparent;

  left: 272px;
  top: -14px;
  width: 76px;
  height: 30px;
  position: relative;
  line-height: 20px;
  border-radius: 26px 0px 26px 0px;

  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  /* background-position: right bottom; */
}

.touchqu .bigtouchqu .chang div:nth-child(1) div {
  background-color: rgba(9, 208, 178, 100);
}
.touchqu .bigtouchqu .chang div:nth-child(2) div {
  background-color: rgb(255, 0, 86);
}
.touchqu .bigtouchqu .chang div:nth-child(3) div {
  background-color: #ffc805;
}

.touchqu .bigtouchqu .chang > div div span {
  background-color: transparent;
  color: rgba(255, 255, 255, 100);
  width: 50px;
  height: 30px;
  /* color: rgba(255, 255, 255, 100); */
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  font-family: 方正准圆-标准;
  display: inline-block;
}
/* 底部 */
.last {
  left: 0px;
  top: 554px;
  width: 414px;
  height: 940px;
  margin-top: 10px;
  line-height: 20px;
  border-radius: 26px;
  /* text-align: center; */
  background: white;
  overflow: hidden;

  box-shadow: 0px 2px 6px 0px rgba(230, 230, 230, 40);
}
.last ul {
  height: 48px;
  width: 414px;
  /* background: wheat; */
  line-height: 48px;
  display: flex;
  /* text-align: center; */
}
.last ul li {
  list-style: none;
  left: 84px;
  top: 566px;
  line-height: 24px;
  margin-top: 12px;
  width: 80px;
  height: 24px;
  color: rgba(168, 168, 168, 100);
  font-size: 14px;
  text-align: center;
  font-family: PingFangSC-regular;
  margin-right: 3px;
}
.last ul .bg {
  left: 167px;
  top: 566px;
  width: 80px;
  font-weight: 700;

  height: 24px;
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  text-align: center;
  font-family: PingFangSC-regular;
}
.last .cont {
  /* height: 48px; */
  width: 414px;
  /* background: wheat; */
  /* line-height: 48px; */
  display: flex;
  flex-wrap: wrap;
  /* text-align: center; */
}
.last .cont .pages {
  width: 180px;
  margin-top: 23px;
  margin-right: 12px;
  /* background: chartreuse; */
  height: 273px;
  margin-left: 14px;
}
.last .cont .pages img {
  margin-bottom: 12px;
}
.last .cont .pages .pp p:nth-child(1) {
  left: 14px;
  top: 817px;
  width: 180px;
  height: 51px;
  color: rgba(0, 0, 0, 1);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  font-family: 方正准圆-标准;
}
.last .cont .pages .pp p:nth-child(2) span:nth-child(1) {
  width: 66px;
  height: 24px;
  line-height: 17px;
  border-radius: 20px;
  background-color: rgba(255, 199, 0, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 12px;
  display: inline-block;
  line-height: 24px;

  margin-right: 6px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(255, 230, 139, 100);
  font-family: Arial;
}
.last .cont .pages .pp p:nth-child(2) span:nth-child(2) {
  width: 48px;
  height: 24px;
  line-height: 17px;
  border-radius: 20px;
  background-color: rgba(9, 207, 177, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 12px;
  display: inline-block;
  line-height: 24px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(201, 255, 249, 100);
  font-family: Arial;
}

/* 底部 */
.bottom {
  margin-top: 30px;
  width: 414px;
  height: 60px;
  line-height: 20px;
  border-radius: 26px 26px 0px 0px;
  text-align: center;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0px -2px 6px 0px rgba(225, 225, 225, 40);
}
.bottom .on {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottom .on div {
  width: 66px;
  height: 66px;
  line-height: 20px;
  background-color: rgba(10, 206, 176, 100);
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 100);
  border-radius: 50%;
}
.bottom .on div img {
  margin-top: 15px;
  /* margin-left: 17px; */
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
}
.bottom .on:nth-child(3) span {
  width: 24px;
  height: 17px;
  color: rgba(190, 191, 190, 100);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.blindstory {
  width: 100vw;
  height: 736px;
  background: rgba(40, 42, 54, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 55;
}
.pop_up {
  width: 320px;
  height: 419px;
  background: white;
  position: absolute;
  top: calc(calc(100vh - 419px) / 2);
  left: calc(calc(100vw - 320px) / 2);
  border-radius: 20px;
  text-align: center;
  animation: mymove 1s;
}
@keyframes mymove {
  10% {
    transform: scale(0.85);
  }
  20% {
    transform: scale(1.15);
  }
  40% {
    transform: scale(0.95);
  }
  60% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.95);
  }
  90% {
    transform: scale(1);
  }
}

.h2_huan {
  margin: 40px 0;
}
.h2_huan p {
  color: #00b296;
  font-size: 18px;
  font-weight: 700;
}
.h1_huan_xin {
  color: #00b296;
  font-size: 25px;
  font-weight: 1000;
}
.ma {
  color: #fdd33b;
  font-size: 25px;
  font-weight: 800;
}
.h1_huan_san {
  color: #00b296;
  font-size: 25px;
  font-weight: 800;
}
.h1_huan {
  margin-bottom: 140px;
}
.story {
  width: 230px;
  height: 40px;
  border-radius: 20px;
  color: white;
  text-align: center;
  line-height: 40px;
  background: #00b296;
  margin: 0 auto;
}
.no_XX {
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  /* position: relative; */
  z-index: 60;
  position: absolute;
  bottom: 120px;
  left: calc(calc(100vw - 20px) / 2);
}
.no_XX i{
  font-size: 32px;
  position: absolute;
  left: -3px;
  top: -4px;
}
</style>